<%--
  Created by IntelliJ IDEA.
  User: Cc
  Date: 2020/12/30
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="<%=basePath%>static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="<%=basePath%>static/css/font.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/xadmin.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/jqPaginator.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/xadmin.js"></script>

</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="#">用户列表</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input type="text" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            <button class="layui-btn" type="button"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>

    <xblock>
        <button class="layui-btn" onclick="x_admin_show('添加信息','./user-add.jsp',500,450)"><i class="layui-icon"></i>添加
        </button>
        <span class="x-right" style="line-height:40px">共有数据：1 条</span>
    </xblock>
    <table class="layui-table">
        <thead>
			<tr>
				<th>ID</th>
				<th>登录名</th>
				<th>密码</th>
                <th>爱好</th>
				<th>操作</th>
			</tr>
        </thead>
        <tbody id="tab"></tbody>
		<tr>
            <td colspan="8" align="center">
                <ul class="pagination" id="pagination1"></ul>
            </td>
        </tr>
    </table>


</div>

<script>
	 $(document).ready(function enterJudge(e) {
	  $(this).keydown(function (e) {
		  if (e.which=="13" && $("#queryUserAccount").val() != ''){
			  queryUserByUserAccount();
			  return false;
		  }
	  })
	})
</script>

<script>

    //总页数
    var totalPages = 0;
    //总条数
    var totalCounts = 0;
    //当前页
    var currentPage = 0;
    //页面加载完成就去执行此代码，主要目的就是加载按钮，以及当页面中pagaNum发生变化时，去执行后台查询数据方法
    $(document).ready(function () {
        //第一次执行selectAllUser函数，用于初始化参数
        selectAllUser(-1);
        //加载按钮
        $("#pagination1").jqPaginator({
            //总页数
            totalPages:totalPages,
            //总条数
            totalCounts:totalCounts,
            //当前页
            currentPage:currentPage,
            //首页
            first:'<li class="first"><a href="javascript:void(0)">首页</a></li>',
            //上一页
            prev:'<li class="prev"><a href="javascript:void(0)">上一页</a></li>',
            //下一页
            next:'<li class="next"><a href="javascript:void(0)">下一页</a></li>',
            //末页
            last:'<li class="last"><a href="javascript:void(0)">末页</a></li>',
            //当前页
            page:'<li class="page"><a href="javascript:void(0)">{{page}}</a></li>',
            // pageNum改变执行页数， 参数其实就是n
            onPageChange : function (num) {
                selectAllUser(num)
            }
        })
    });

    function selectAllUser(n) {
        $.ajax({
            url:"../user/queryAll",
            dataType:"json",
            type:"post",
            //  设置同步请求
            async:false,
            data:{
                "pageNum": n,
                "pageSize": 1
            },success:function (data) {
                console.log(data);
                // 获取用户登录
                var userlist = data.list;
                if(userlist.length > 0){
                    totalPages = data.pages;
                    totalCounts = data.total;
                    currentPage = data.pageNum;

                    // 首先定义一个空字符串，接受用户数据
                    var str = '';
                    // 通过for循环拼接用户数据
                    for (var i = 0; i < userlist.length; i++){
                        str = str + "<tr> " +
                            "<td>" + userlist[i].id + "</td>" +
                            "<td>" + userlist[i].username + "</td>" +
                            "<td>" + userlist[i].password + "</td>" +
                            "<td>" + userlist[i].myHobby+ "</td>" +
                            "<td><button type='button'>删除</button>" + "&nbsp;&nbsp;&nbsp;<button type='button'>修改</button></td>"+
                            "</tr>";
                        $("#tab").html(str)
                    }
                } else {
                    totalPages = data.pages;
                    totalCounts = data.total;
                    currentPage = data.pageNum;
                    $("#tab").html("<tr>\n" +
                        "            <td colspan=\"8\" align=\"center\">\n" +
                        "               没有数据请加载数据\n" +
                        "            </td>\n" +
                        "        </tr>")
                }
            },error:function () {
                alert("服务器错误")
            }
        })
    }

</script>
</body>

</html>